<template>
  <div class="container" id="flowBox" ref="flowRef">
    <VueFlow :nodes="nodes" :fit-view="true" :nodes-draggable="false" :edges="edges" :max-zoom="1.2" :min-zoom="0.8"
      @nodeClick="nodeClickHandler">
      <template #node-custom="props">
        <CustomNode v-bind="props" />
      </template>
    </VueFlow>
  </div>
  <el-dialog v-model="optionVisible" title="工序编辑" width="1000">
    <el-form :inline="true" label-position="left" :model="stepForm" class="p-4">
      <el-form-item label="作业方法" label-width="120px">
        <el-input v-model="stepForm.content" :disabled="!isEdit" style="width: 260px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="作业人员代码" label-width="120px">
        <el-input v-model="stepForm.peopleCode" :disabled="!isEdit" style="width: 260px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="危险源" label-width="120px">
        <el-input v-model="stepForm.danger" :disabled="!isEdit" style="width: 260px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="使用工具、材料" label-width="120px">
        <el-input v-model="stepForm.materail" :disabled="!isEdit" style="width: 260px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="安全措施" label-width="120px">
        <el-input v-model="stepForm.method" :disabled="!isEdit" style="width: 260px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="技术要点" label-width="120px">
        <el-input v-model="stepForm.tec" :disabled="!isEdit" style="width: 260px;" type="textarea" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="optionVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFile">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>
import { VueFlow, MarkerType } from '@vue-flow/core'

// import { ref, watch } from 'vue'
import CustomNode from './customNode.vue'
import { useDebounceFn } from '@vueuse/core'

const flowRef = ref(null)
// const { width, height } = useWindowSize()

// const windowWidth = ref(window.innerWidth);
// const sizeChange = async useResizeObserver(flowRef,(entries)=>{
//   const entry = entries[0]
//   const {width,height} = entry.contentRect
//   console.log(width);
// })
const debounceFn = useDebounceFn(() => {
  getNodesAndEdges(tempNodes.value)
}, 1000)

const props = defineProps({
  isEdit: Boolean,
  flowArray: Array
})
const optionVisible = ref(false)
const stepForm = ref({
  content: '',
  danger: '',
  tec: '',
  peopleCode: '',
  materail: '',
  method: ''
})
let nodeList = []
let tempNodes = ref([])
const nodes = ref([])
const edges = ref([])

watch(() => props.flowArray, (newValue, oldValue) => {  
  newValue.forEach((element, index) => {
    let node = {
      id: index + 1 + '',
      label: element.步序,
      data: {
        // content: element.步序,
        content: element["作业方法"],
        peopleCode: element["作业人员代码"],
        materail: element["使用工具、材料编号"],
        danger: element["危险源"],
        method: element["作业方法"],
        tec: element["技术要点"]
      },
      type: 'custom',
      position: { x: 0, y: 50 },
    }
    nodeList.push(node)
  });
  tempNodes.value = nodeList
  getNodesAndEdges(nodeList)
});
onMounted(() => {
  window.addEventListener('resize', debounceFn)
})
const getNodesAndEdges = (tempNodes) => {
  nodes.value = []
  edges.value = []
  var element = document.getElementById("flowBox");
  var width = element?.offsetWidth;
  let tempEdges = []
  let begin = 0
  let count = 0
  let tempXy = { x: 50, y: 80 }
  let edgeId = 1
  // 排序
  tempNodes.forEach(el => {
    let xy = { x: 50, y: 80 }
    if (tempXy.x > width - 300) {
      count++
      begin = 0
    }
    xy.x = 40 + 180 * begin
    xy.y = 80 + 120 * count
    begin++
    tempXy = xy
    el.position = xy
    var arr = el.label.split(',')
    var stepArr = arr[0].split('->')
    let edge = {
      id: 'el' + edgeId++,
      type: 'step',
      source: stepArr[0],
      target: stepArr[1],
      // source: el.id,
      // target: (parseInt(el.id) + 1).toString(),
      animated: true,
      markerEnd: MarkerType.ArrowClosed
    }
    tempEdges.push(edge)
  })
  nodes.value = [...tempNodes]
  edges.value = [...tempEdges]
}

const nodeClickHandler = (val) => {
  const node = val.node;
  stepForm.value = node.data
  optionVisible.value = true
};
const saveFile = () => {
  optionVisible.value = false
}
onMounted(() => {

})
</script>
<style>
/* these are necessary styles for vue flow */
@import "@vue-flow/core/dist/style.css";
/* this contains the default theme, these are optional styles */
@import "@vue-flow/core/dist/theme-default.css";
</style>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 400px;
}

.vue-flow__node-input {
  border: 1px solid blue !important;
}
</style>